<template>
<div id="app" style="height:100%">
  <router-view v-if="$route.meta.singlePage"></router-view>
  <Layout v-if="false==$route.meta.singlePage">
    <Header :style="{position: 'fixed',zIndex:999, background: '#fff',boxShadow: '0 2px 3px 2px rgba(0,0,0,.1)',width: '100%',paddingLeft:'0'}">
        <layout>
        <Sider :style="{background: '#fff',boxShadow: '0 0px 2px 2px rgba(0,0,0,.1)'}">
          <div style="background:url('/static/images/logo.png') center center / cover;height:64px"></div>
        </Sider>
        <Content>
        <Row :style="{background: '#fff',}">
          <Col span="20">&nbsp;</Col>
          <Col span="4"><div style="text-align:right">
            <Button  type="text" size="large" @click="logout"><Icon type="power" size="16" style="position:relative;top:2px;"></Icon>&nbsp;退出</Button>
          </div></Col>
        </Row>
        </Content>
        </layout>
    </Header>
    <Sider :style="{paddingTop:'64px',position: 'fixed', height: '100vh', left: 0, overflow: 'auto',background: '#fff',boxShadow: '0 2px 3px 2px rgba(0,0,0,.1)',minHeight: '100%'}">
      
      <div class="avatar-warpper">
        <img src="/static/images/avatar.png" style="width:7.2rem;height:7.2rem;border-radius:4rem;" />
        <p>{{userInfo.nickname}}</p>
      </div>
      <Menu @on-select="changeMenu" :style="{width:'100%'}" theme="light" :active-name="menuActive" :open-names="menuOpen">
        <MenuItem  to="/"  name=0>首页</MenuItem>
        <template v-for="(item,index) in menuData" >
          <MenuItem :to="subitem.url" v-if="false==item.hasOwnProperty('children')" :key="item.id" :name="item.id+''">
            {{item.name}}
          </MenuItem>
          <MenuGroup  v-if="item.hasOwnProperty('children')" :key="item.id" :title="'--'+item.name+'--'" >
            <MenuItem :to="subitem.url" v-for="(subitem,index) in item.children" :key="subitem.id" :name="subitem.id+''">
              {{subitem.name}}
            </MenuItem>
          </MenuGroup>
        </template>

        
      <div class="cleaner20"></div>
      </Menu>
    </Sider>
    <Content :style="{ background: '#fff', minHeight: '100%'}">
      <div style="margin:66px 0 0 200px;padding:15px;position:relative">
        <Spin size="large" fix v-if="spinShow"></Spin>
        <transition name="slide-left"> 
          <keep-alive v-if="$route.meta.keepAlive">
              <router-view></router-view>
          </keep-alive>
          <router-view v-if="!$route.meta.keepAlive"></router-view>
        </transition>
      </div>
      
    </Content>
  </Layout>
</div>
</template>

<script>
// 引入子组件
import {mapState,mapGetters} from 'vuex'
import { Spin, Layout, Header, Content, Avatar, Sider, Menu, Submenu, MenuItem, MenuGroup, Icon, Row, Col, Button, Badge } from 'iview';
export default { 
	name:'app',
	components: {Spin, Layout, Header, Content, Avatar, Sider, Menu, Submenu, MenuItem, MenuGroup, Icon, Row, Col, Button, Badge},
	data () {
		return {
      menuIndex:[{id:1,nid:''},{id:5,nid:'timecoin_publisher_index'},],
		}
	},
	methods:{
    changeMenu:function(name){
      this.$store.dispatch('setMenuActive', name)
      this.$store.dispatch('setMenuOpen', [name])
      
    },
    logout:function(){
			this.$store.dispatch('setToken','')
      window.localStorage.removeItem('token','')
      this.$router.push({name:'login'});
    }
	},
	created:function(){
	},
	mounted () {
    this.setTitle()
    this.$store.dispatch('setMenuIndex',this.menuIndex)
    if('' != this.token){
      let self=this
      this.$http.get('/v1/system/menu',{params: { 'token': self.token}}).then(function(response){
        if(200==response.data.status && 0 == response.data.code){
          self.$store.dispatch('setMenuData',response.data.data)
        }
      }).catch(function(error){
        self.$Message.error(error.message)
        return

      })
    }
	},
	activated:function(){
	},
	computed:{
    ...mapState(['menuActive','menuOpen']),
    ...mapGetters(['menuActive','menuOpen','spinShow','menuData','token','userInfo'])
  },
  watch:{
    token:function(newval,oldval){

      let self=this
      if('' != this.token){
        this.$http.get('/v1/system/menu',{params: { 'token': self.token}}).then(function(response){
          if(200==response.data.status && 0 == response.data.code){
            self.$store.dispatch('setMenuData',response.data.data)
          }
        }).catch(function(error){
          self.$Message.error(error.message)
          return

        })
      }
    }
  }
}
</script>
<style lang="less">
  @import './theme.less';
</style>
<style lang="less" scoped>
.avatar-warpper{text-align:center;padding:1.5rem 0; box-shadow: inset rgba(0, 0, 0, 0.1) -1px 0px 0 0;    border-bottom: 1px solid #eee;}
.ivu-menu-item-active{background-color: rgb(243, 245, 249)}
.move-enter-active{
    transition: left 0.5s linear;
    // transform: rotateY(110deg);
  }
 .move-leave-active {
   transition: left 0.5s linear;
  //  transform: rotateX(110deg);
 }
.move-enter, .move-leave {
    // transform: rotateX(110deg);
}
</style>
